<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div style="text-align: center;padding-top: 10%;">
    hello <span><?=htmlspecialchars($name)?></span>
</div>
</body>
<script>
    //创建一个webSocket实例，执行后，客户端就会与服务端连接
    var ws = new WebSocket("ws://127.0.0.1:7272");
    //var ws = new WebSocket("ws://60.205.5.168:7272");

    //当WebSocket创建成功时，触发onopen事件
    ws.onopen = function(){
        console.log("open");
        // 复杂的数据结构，在通过连接发送之前，必须进行序列化。
        const json = JSON.stringify({
            type: 'keepalive',
            id: ''
        });
        ws.send(json); //将消息发送到服务端
        console.log(json);
    }

    // setInterval(function(){
    //     const json = JSON.stringify({
    //         type: 'keepalive_setInterval',
    //         id: Math.random()*(20-10)+10
    //     });
    //     ws.send(json); //定时发消息送到服务端
    // },1000);

    //当客户端收到服务端发来的消息时，触发onmessage事件
    ws.onmessage = function(e){
        //e.data 的数据格式也是字符串，手动解析这些数据才能得到其他格式的数据。
        console.log(e.data);
    }

    //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
    ws.onclose = function(e){
        console.log("close");
    }

    //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
    ws.onerror = function(e){
        console.log(error);
    }
</script>
</html>